<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>数据大屏</title>
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>

<body scroll="no">
  <header>
    <h1>同城旺数据中心</h1>
  </header>
  <section class="mainbox">
    <div class="column">
      <div class="panel" style="height: 2.8rem;">
        <h2> 用户数量 </h2>
        <div class="list">
          <div class="li">
            <img src="./images/nav1.png" alt="">
            <div class="name">注册用户</div>
            <div class="num" id="signIn">0</div>
          </div>
          <div class="li">
            <img src="./images/nav2.png" alt="">
            <div class="name">活跃用户</div>
            <div class="num" id="active">0</div>
          </div>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel" style="height: 9rem;margin-bottom: 0;">
        <h2> 订单状态 </h2>
        <div class="myscroll">
          <!-- <ul>
            <li>
              <div class="item">
                <div>187****0731</div>
                <div>用户已确认</div>
                <div>张**</div>
              </div>
            </li>
          </ul> -->
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">
      <div class="volume" style="height: 7.1rem;">
        <div class="name">2021年总成交额</div>
        <div class="num-wrap">
          <span class="num" id="total">0</span>
          <span class="unit">元</span>
        </div>
      </div>
      <div class="panel line1" style="height: 4.89rem;margin-bottom: 0;">
        <h2>新增订单趋势（月）</h2>
        <div class="chart"></div>
        <div class="order-wrap">
          <div class="item">
            <div class="name">用户访问量</div>
            <div class="num" id="visit">581007</div>
            <div class="item-footer"></div>
          </div>
          <div class="item">
            <div class="name">新增订单量</div>
            <div class="num" id="adds">581007</div>
            <div class="item-footer"></div>
          </div>
          <div class="item">
            <div class="name">已完成订单量</div>
            <div class="num" id="succeed">581007</div>
            <div class="item-footer"></div>
          </div>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column" style="min-width: 100px;">
      <div class="panel pie1" style="height: 6.9rem;">
        <h2>旺旺商城</h2>
        <div class="chart" style="height: 6rem;"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel" style="height: 4.9rem;margin-bottom: 0;">
        <h2>月平均数</h2>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" id="swiper1"></div>
            <div class="swiper-slide" id="swiper2" style="display: block;"></div>
          </div>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </section>

  <script src="js/flexible.js"></script>
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/swiper-bundle.min.js"> </script>
  <script src="js/index.js"></script>
  <!-- <script src="js/china.js"></script> -->
  <!-- <script src="js/myMap.js"></script> -->
  <script src="js/scroll.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.counterup.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/countup.js"></script>


  <script>
    $(function () {
      // 列表滚动
      $('.myscroll').myScroll({
        speed: 40, //数值越大，速度越慢
        rowHeight: 42//li的高度
      });
    });

    var mySwiper = new Swiper('.swiper-container', {
      autoplay: true,//可选选项，自动滑动

    })

    //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
    // new Swiper('.swiper-container')
    // var mySwiper = document.querySelector('.swiper-container').swiper
    // mySwiper.slideNext();

  </script>
</body>

</html>